.help {
  width: 100vw;
  min-height: 100vh;
  background-color: #FFDBDC;

  .coupon-banner {
    width: 750rpx;
    height: 810rpx;
    position: relative;
    overflow: hidden;

    .coupon-banner-image {
      width: 750rpx;
      height: 970rpx;
    }


  }

  .box {
    width: 748rpx;
    height: 682rpx;
    position: relative;
    top: -110rpx;
    background-size: 100% 100%;
    background-image: url(https://static.joymew.com/joymew-assist/pttq/help/box.png);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .count {
      color: #FF002B;
      font-size: 120rpx;
      letter-spacing: 4rpx;
    }

    .per {
      font-size: 32rpx;
      color: #F29D54;
    }

    .help-list {
      display: flex;
      width: 552rpx;
      height: 215rpx;
      // border: 1px solid red;
      overflow-x: scroll;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .help-item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-right: 40rpx;

        .avator {
          width: 72rpx;
          height: 72rpx;
          border-radius: 50%;
          background-color: #FEFBF5;
        }

        .text {
          width: 72rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 18rpx;
          color: #999999;
          font-size: 32rpx;
        }
      }
    }

    .btn {
      animation: heart 1s linear infinite;

    }

    .btn,
    .btn-helped {
      color: #FEFEFE;
      font-size: 36rpx;

      width: 552rpx;
      height: 96rpx;
      background: linear-gradient(0deg, #ff0000 0%, #ff5400 100%);
      border-radius: 48rpx;

      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 2s;

      &.btn-helped {
        background: grey;
      }

      &.helped {
        background: grey;
        transition: all 2s;

      }

      &.reactive {
        transition: all 2s;
        background: linear-gradient(0deg, #ff0000 0%, #ff5400 100%);
      }

    }
  }

  .rule {
    width: 100%;
    padding: 14rpx;
    position: relative;
    top: -110rpx;
    color: #333333;

    .title {
      font-size: 28rpx;
      margin-bottom: 40rpx;
    }

    font-size: 24rpx;

    view {
      color: #666666;
      margin-top: 20rpx;
    }
  }

  .coupon-wrap {
    width: 750rpx;
    position: relative;
    top: -100rpx;

    .coupon-wrap-item {
      width: 712rpx;
      height: 178rpx;
      margin: 0 auto;
      margin-top: 24rpx;
      background-size: 100% 100%;
    }

    .coupon-wrap-a {
      // background-image: url(https://static.joymew.com/joymew-assist/pttq/main/coupon-a.png);
      background-image: url(https://static.joymew.com/joymew-assist/pttq/main/coupon-wrap-aaa.png);

    }

    .coupon-wrap-b {
      // background-image: url(https://static.joymew.com/joymew-assist/pttq/main/coupon-b.png);
      background-image: url(https://static.joymew.com/joymew-assist/pttq/main/coupon-wrap-bbb.png);


    }

    .coupon-wrap-c {
      // background-image: url(https://static.joymew.com/joymew-assist/pttq/main/coupon-c.png);
      background-image: url(https://static.joymew.com/joymew-assist/pttq/main/coupon-wrap-ccc.png);


    }

    .coupon-wrap-d {
      // background-image: url(https://static.joymew.com/joymew-assist/pttq/main/coupon-d.png);
      background-image: url(https://static.joymew.com/joymew-assist/pttq/main/coupon-wrap-ddd.png);


    }
  }
}

.successHelp-mask {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.50);

  .sg-box {
    width: 560rpx;
    height: 718rpx;
    background-image: url(https://static.joymew.com/joymew-assist/pttq/tips/dialog3.png);
    background-size: 100%;
    position: absolute;
    top: calc( 50% - 718rpx / 2);
    left: calc(50% - 560rpx / 2);
    // transform: translate(-50%, -50%);
    transform: scale(0,0);
    opacity: 0;
    padding-top: 200rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .close {
      position: absolute;
      top: 130rpx;
      right: 32rpx;
      width: 48rpx;
      height: 48rpx;
      background-image: url(https://static.joymew.com/joymew-assist/pttq/tips/close2.png);
      background-size: 100% 100%;
      // background-color: red;
    }

    .coupon-min {
      width: 536rpx;
      height: 134rpx;
      // border: 1px solid red;
    }

    .p1 {
      width: 100%;
      color: #333333;
      font-size: 36rpx;
      font-weight: 400;
      text-align: center;

      .sub {
        font-weight: 700;
        letter-spacing: 4rpx;
        color: #FC3A35;
      }
    }

    .p2 {
      color: #666666;
      font-size: 28rpx;
    }

    .btn-wrap {
      display: flex;
      justify-content: space-between;

      .todetail {
        width: 164rpx;
        height: 84rpx;
        font-size: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8b11c;
        color: #fefefe;

        border-radius: 42rpx;
        margin-right: 24rpx;
      }

      .sure {
        background-image: url(https://static.joymew.com/joymew-assist/pttq/tips/sure.png);
        background-size: 100% 100%;
        width: 324rpx;
        height: 84rpx;
        font-size: 32rpx;
        color: #fefefe;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .tips {
      color: #999999;
      font-size: 24rpx;
    }

  }
}
.box-in-animate {
  animation-delay: 0s;
  animation-duration: 0.2s;
  animation-name: flyIn;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
.box-out-animate {
  animation-delay: 0s;
  animation-duration: 0.2s;
  animation-name: flyOut;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}